@use '../../token/breakpoint';
@use '../../token/colors';

$jhlite-menu-content-template-menu-medium-width: 300px;
$jhlite-menu-content-template-color-divider: colors.$jhlite-global-color-fill-secondary;

.jhlite-menu-content-template {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;

  &--content {
    height: inherit;
  }

  &--content,
  &--menu {
    box-sizing: border-box;
    flex-basis: 0;
    flex-grow: 1;
    border-bottom: 1px solid $jhlite-menu-content-template-color-divider;
    padding: 0;
    min-height: 0;
    overflow: auto;

    &:last-child {
      border-bottom: 0;
    }
  }
}

@media screen and (min-width: breakpoint.$jhlite-global-breakpoint-small-medium) {
  .jhlite-menu-content-template {
    flex-direction: row;

    &--menu {
      flex-basis: auto;
      flex-grow: 0;
      width: $jhlite-menu-content-template-menu-medium-width;
    }

    &--content,
    &--menu {
      border-right: 1px solid $jhlite-menu-content-template-color-divider;
      border-bottom: 0;

      &:last-child {
        border-right: 0;
      }
    }
  }
}
